<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API 文档</title>
  <style>
    /* 继承原有样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    body {
      background-color: #f0f2f5;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }

    .header {
      background-color: #2d8cf0;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      text-decoration: none;
      color: inherit;
    }

    .nav {
      display: flex;
      gap: 20px;
    }

    .nav a {
      color: white;
      text-decoration: none;
      padding: 10px;
      transition: all 0.3s;
    }

    .nav a:hover {
      background-color: rgba(255,255,255,0.2);
      border-radius: 4px;
    }

    /* 新增文档样式 */
    .doc-container {
      display: flex;
      gap: 20px;
      padding: 20px;
      flex-grow: 1;
    }

    .sidebar {
      width: 25%;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .main-content {
      flex-grow: 1;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .api-group {
      padding: 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }

    .api-group:hover {
      background-color: #f8f9fa;
    }

    .api-method {
      padding: 10px 15px;
      margin-left: 20px;
      border-left: 3px solid #2d8cf0;
    }

    .api-method:hover {
      background-color: #f8f9fa;
    }

    .endpoint {
      margin: 20px 0;
    }

    .endpoint h3 {
      color: #2d8cf0;
      margin-bottom: 10px;
    }

    .parameter-table {
      width: 100%;
      border-collapse: collapse;
      margin: 15px 0;
    }

    .parameter-table th,
    .parameter-table td {
      padding: 10px;
      border: 1px solid #ddd;
      text-align: left;
    }

    .parameter-table th {
      background-color: #f8f9fa;
    }

    .response-example {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
<header class="header">
  <a href="/" class="logo">AI 文档中心</a>
  <nav class="nav">
    <a href="/index.html">首页</a>
    <a href="#">动态</a>
    <a href="#">游戏</a>
    <a href="#">空间</a>
    <a href="#">市场</a>
  </nav>
</header>

<div class="doc-container">
  <div class="sidebar">
    <div class="api-group" data-section="global">全局参数</div>
    <div class="api-group" data-section="user">用户模块</div>
    <div class="api-group" data-section="message">消息模块</div>
  </div>

  <div class="main-content">
    <!-- 全局参数 -->
    <div id="global" class="section">
      <h2>全局参数</h2>
      <table class="parameter-table">
        <tr>
          <th>参数名</th>
          <th>类型</th>
          <th>是否必须</th>
          <th>说明</th>
        </tr>
        <tr>
          <td>Authorization</td>
          <td>string</td>
          <td>是</td>
          <td>Bearer token</td>
        </tr>
        <tr>
          <td>Content-Type</td>
          <td>string</td>
          <td>是</td>
          <td>application/json</td>
        </tr>
      </table>
    </div>

    <!-- 用户模块 -->
    <div id="user" class="section" style="display: none;">
      <h2>用户登录</h2>
      <div class="endpoint">
        <h3>POST /api/login</h3>
        <h4>请求参数</h4>
        <table class="parameter-table">
          <tr>
            <th>参数名</th>
            <th>类型</th>
            <th>是否必须</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>username</td>
            <td>string</td>
            <td>是</td>
            <td>用户名</td>
          </tr>
          <tr>
            <td>password</td>
            <td>string</td>
            <td>是</td>
            <td>密码</td>
          </tr>
        </table>

        <h4>响应示例</h4>
        <pre class="response-example">
{
    "code": 200,
    "message": "登录成功",
    "data": {
        "token": "your_token_here"
    }
}
                    </pre>
      </div>
    </div>

    <!-- 消息模块 -->
    <div id="message" class="section" style="display: none;">
      <h2>发送消息</h2>
      <div class="endpoint">
        <h3>POST /api/messages</h3>
        <h4>请求参数</h4>
        <table class="parameter-table">
          <tr>
            <th>参数名</th>
            <th>类型</th>
            <th>是否必须</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>content</td>
            <td>string</td>
            <td>是</td>
            <td>消息内容</td>
          </tr>
          <tr>
            <td>recipient</td>
            <td>string</td>
            <td>是</td>
            <td>接收者ID</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
  // 侧边栏点击事件处理
  document.querySelectorAll('.api-group').forEach(group => {
    group.addEventListener('click', function() {
      const sectionId = this.dataset.section;
      document.querySelectorAll('.section').forEach(section => {
        section.style.display = 'none';
      });
      document.getElementById(sectionId).style.display = 'block';
    });
  });
</script>
</body>
</html>